<template>
  <div id="app">
    <Navbar />
    <main>
      <section class="classic-cases">
        <h1>经典案例</h1>
        <div v-for="(caseItem, index) in caseList" :key="index" class="case-item">
          <img :src="caseItem.image" alt="案例图片" class="case-image">
          <h2 class="case-title">{{ caseItem.title }}</h2>
          <p class="case-description">{{ caseItem.description }}</p>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";

// 模拟案例数据
const caseList = [
  {
    title: "某企业计算机网络工程优化案例",
    description: "我们为某大型企业进行了计算机网络工程的优化，通过重新规划网络架构，提升了网络的稳定性和传输速度，有效解决了之前网络卡顿的问题。",
    image: "https://example.com/case1.jpg" // 这里应替换为实际的图片链接或使用相对路径指向本地图片
  },
  {
    title: "大数据分析助力电商精准营销案例",
    description: "为一家电商平台提供大数据分析服务，通过对用户行为数据的深入挖掘，帮助其制定了精准的营销策略，显著提高了销售额和用户转化率。",
    image: "https://example.com/case2.jpg"
  },
  {
    title: "企业级软件定制开发案例",
    description: "根据某企业的特殊业务需求，我们为其定制开发了一套企业级管理软件，涵盖了项目管理、财务管理等多个模块，大大提高了企业的运营效率。",
    image: "https://example.com/case3.jpg"
  }
];
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.classic-cases {
  padding: 40px;
}

.case-item {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.case-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 15px;
}

.case-title {
  margin-bottom: 10px;
}

.case-description {
  line-height: 1.6;
}
</style>